// 导出echarts图表为html文件
// echartsOptions | Object: 需要与导出图表的echarts配置一致，必传
// htmlname | String: 输出的html文件名
// tmptitle | String: 默认模版里显示的主标题，需要和模版里变量有无保持一致
// tmpSubtitle | String: 默认模版里显示的副标题，需要和模版里变量有无保持一致
export function ExportEchartsHtml (params) {
  // 读取模版文件
  let charsOptionStr = JSON.stringify(params.echartsOptions)
  // let echartsUrl = `${location.origin}/js/echarts.js`
  let htmlFiles = htmlTemplate
    .replace(`%tmp%`, charsOptionStr)
  // .replace(`%echartUrl%`, echartsUrl)
  if (params.tmpTitle !== undefined && params.tmpTitle !== '') {
    htmlFiles = htmlFiles.replace(`%tmpTitle%`, params.tmpTitle).replace(`%letShow%`, 'block')
  }
  if (params.tmpSubTitle !== undefined && params.tmpSubTitle !== '') {
    htmlFiles = htmlFiles.replace(`%tmpSubTitle%`, params.tmpSubTitle).replace(`%letShow1%`, 'block')
  }
  if (params.filterTagsStr !== undefined && params.filterTagsStr !== '') {
    htmlFiles = htmlFiles.replace(`%filterTagsStr%`, params.filterTagsStr).replace(`%filterTagsShow%`, 'block')
  }
  if (params.bgColor !== undefined && params.bgColor !== '') {
    htmlFiles = htmlFiles.replace(`%bgColor%`, params.bgColor)
  }
  if (params.tittleColor !== undefined && params.tittleColor !== '') {
    htmlFiles = htmlFiles.replace(`%tittleColor%`, params.tittleColor)
  }
  if (params.tagBgColor !== undefined && params.tagBgColor !== '') {
    htmlFiles = htmlFiles.replace(`%tagBgColor%`, params.tagBgColor)
  }
  if (params.tagBorderColor !== undefined && params.tagBorderColor !== '') {
    htmlFiles = htmlFiles.replace(`%tagBorderColor%`, params.tagBorderColor)
  }

  // 导出
  var chart = document.createElement('a')
  var url = window.URL.createObjectURL(
    new Blob([htmlFiles], {
      // type: ''
      type: 'text/html'
    })
  )
  chart.href = url
  chart.download = params.htmlname ? `${params.htmlname}.html` : 'chart.html'
  chart.click()
  window.URL.revokeObjectURL(url)
}

// htmlTemplate | js模版文件: 为导出的html模版，可参考已有模版，定制化输出的html样式
export const htmlTemplate = `<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.9.0-rc.1/echarts-en.common.js"></script>
      <title>对比图表</title>
  </head>
  <style>
      * {
          margin: 0;
          height: 0;
      }
      body {
        background: %bgColor%;
      }
      .showTitle{
          font-weight: bold;
          font-size: 22px;
          text-align:center;
          line-height:80px;
          height: 80px;
          display:none;
          display:%letShow%;
          color:%tittleColor%;
      }
      .showSubTitle{
          font-weight: bold;
          font-size: 18px;
          text-align:center;
          line-height:30px;
          height: 30px;
          display:none;
          display:%letShow1%;
      }
      .showFilterTags {
          font-size: 12px;
          text-align:center;
          line-height:30px;
          height: 30px;
          display:none;
          display:%filterTagsShow%;
      }
      .tag {
        display:inline-block;
        background-color: %tagBgColor%;
        border-color: %tagBorderColor%;
        color: #299BCC;
        padding: 0 10px;
        height: 32px;
        line-height: 30px;
        border-width: 1px;
        border-style: solid;
        border-radius: 4px;
        box-sizing: border-box;
        white-space: nowrap;
        margin-right:5px;
        margin-bottom: 5px;
      }
  </style>
  
  <body>
      <div class="showTitle">%tmpTitle%</div> 
      <div class="showSubTitle">%tmpSubTitle%</div>
      <div class="showFilterTags">%filterTagsStr%</div>
      <div id="tmpCharts" style="width: 100%;height: 90vh;margin-top:5vh;padding-left: 30px;"></div>
  <script>
      var myChart = echarts.init(document.getElementById("tmpCharts"));
      window.addEventListener("resize", () => {
        console.log('resize')
        myChart.resize()
      }, false)
      myChart.setOption(%tmp%);
      
  </script>
  </body>
  </html>`
